<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitle title="问题反馈" :extext="extext"></commonTitle>
		</view>
		<!-- #endif -->
		<view class="list-scroll-content">
			<view class="question-type">
				<view class="question-title">问题类型</view>
				<view class="type-block">
					<view class="type-btn " :class="{'type-btn-selected':type == 1}" @tap="selectType(1)">遇到问题</view>
					<view class="type-btn" :class="{'type-btn-selected':type == 2}" @tap="selectType(2)">功能建议</view>
				</view>
			</view>
			
			<view class="question-detail">
				<view class="question-title">问题说明</view>
				<view class="question-desc">
					<textarea class="desc-text" placeholder="请详细描述你的问题" v-model="contentText"/>
					<view class="img-box">
						<image v-if="!loacalImg" src="../../static/common/pick-img.png" class="pick-img" @tap="closeImgs"></image>
						<image v-else :src="loacalImg" class="hahah" mode="aspectFit" @tap="closeImgs"></image>
					</view>
				</view>
			</view>
			
			<view class="contact">
				<view class="question-title">常用联系方式</view>
				<view class="contact-block">
					<input placeholder="QQ/微信/手机号" class="contact-input" v-model="phone"/>
				</view>
			</view>
			
			<view class="submit-btn" @tap="submitForm">提交反馈</view>
		</view>
		
	</view>
</template>

<script>
	import commonTitle from'../../components/titile/title.vue'
	export default{
		components:{
			commonTitle
		},
		data () {
			return {
				loadingType: 'more',
				extext:"历史反馈",
				apptoken:"",
				contentText:"",
				type:1,
				imgs:"",
				loacalImg:"",
				phone:""
			}
		},
		onLoad() {
			this.apptoken = uni.getStorageSync("apptoken");
		},
		methods: {
			selectType(type){
				this.type = type;
			},
			submitForm(){
				console.log(11111)
				const _this = this;
				if(!this.contentText){
					this.$CommonJS.showToast("请详细描述你的问题");
					return;
				}else{
					
					uni.request({
							url:this.$API.URL + this.$API.tkappeal,
							data:{
								apptoken:this.apptoken,
								content:encodeURI(this.contentText),
								type:this.type,
								phone:this.phone,
								imageUrl:this.imgs,
							},
							method:"POST",
							header:{
								'content-type':'application/x-www-form-urlencoded'
							},
							success(resp) {
								console.log(resp)
								if(resp.data.success){
									
									uni.showToast({
										title:"反馈成功",
										icon:"success"
									})
									_this.contentText = "";
									_this.loacalImg = "";
									_this.phone = ""
								}else{
									uni.showToast({
										title:resp.data.msg,
										icon:"none"
									})
								}
							}
					})
				}
				
			},
			closeImgs(){
				const _this = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function (res) {
							console.log(JSON.stringify(res.tempFilePaths));
							_this.loacalImg = res.tempFilePaths[0];
							//#ifdef APP-PLUS
								//_this.urlTobase64(res.tempFilePaths[0]);
								_this.$CommonJS.appReadFileToBase64(res.tempFilePaths[0]).then((img)=>{
									//_this.setingHeadImg(img)
									//console.log(img)
									// uni.request({
									// 	url:_this.$API.URL + _this.$API.image_upload,
									// 	data:img,
									// 	method:"POST",
									// 	header:{
									// 		'content-type':'application/x-www-form-urlencoded'
									// 	},
									// 	success(d) {
									// 		console.log(d)
									// 	}
									// })
									_this.imgs = img;
								})	
							//#endif
							//#ifdef MP-WEIXIN
							uni.getFileSystemManager().readFile({
									filePath: res.tempFilePaths[0], //选择图片返回的相对路径
									encoding: 'base64', //编码格式
									success: res => { //成功的回调
											let base64 = 'data:image/jpeg;base64,' + res.data //不加上这串字符，在页面无法显示的哦
										_this.imgs = base64;
										_this.loacalImg = res.tempFilePaths[0];
									}
							})
							//#endif
					}
				})
			}
		}
		
	}
</script>

<style>
	@import url("user-info.css");
</style>
